<template>
    <div>
        <!-- 抽屉 -->
        <el-button @click="drawer = true" type="primary"> 点我打开 </el-button>

        <el-drawer
            size="30%"
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false"
        >
            <el-form
                style="margin: 20px"
                ref="form"
                :model="formData"
                :rules="rules"
                label-width="80px"
            >
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="formData.gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input
                        v-model.number="formData.age"
                        type="number"
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="formData.phone"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="formData.address"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="clear">取消</el-button>
                    <el-button type="primary" @click="submit">添加</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="gender" label="性别"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="open(scope.row)"
                        >编辑</el-button
                    >
                    <el-button type="primary" @click="del(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="100"
                layout="prev, pager, next, jumper"
                :total="1000"
            >
            </el-pagination>
        </div>
        <!-- 身份证验证 -->
        <el-form
            style="margin: 20px"
            ref="form1"
            :model="formdata"
            :rules="rules1"
            label-width="80px"
        >
            <el-form-item label="姓名" prop="name">
                <el-input v-model="formdata.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="formdata.gender">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="身份证" prop="idCard">
                <el-input v-model="formdata.idCard"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="sub">提交</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            drawer: false,
            tableData: [],
            tabledata: [],
            i: 0,
            currentPage3: 5,
            formData: {
                name: '',
                gender: '',
                age: '',
                phone: '',
                address: '',
            },
            formdata: {
                name: '',
                gender: '',
                idCard: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                ],
                phone: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^1[3|4|5|7|8][0-9]{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur',
                    },
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
            },
            rules1: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
                idCard: [
                    {
                        required: true,
                        message: '请输入身份证号码',
                        trigger: 'blur',
                    },
                    {
                        pattern:
                            /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                        message: '请输入正确的身份证号码',
                        trigger: 'blur',
                    },
                    { validator: this.validateIdCard, trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        sub() {
            this.$refs.form1.validate((valid) => {
                if (valid) {
                    this.tabledata.push({ ...this.formdata })
                    this.clear1()
                }
            })
            console.log(this.tabledata, '表单数据')
        },
        validateIdCard(rule, value, callback) {
            if (!value) {
                return callback(new Error('请输入身份证号码'))
            }
            // 判断身份证号码是否满足条件
            if (!/^\d{17}[\dXx]$/.test(value)) {
                return callback(new Error('请输入正确的身份证号码'))
            }
            // 提取身份证号码的后两位
            const text = value.slice(-2, -1)
            // 判断奇偶性确定性别
            const gender = parseInt(text) % 2 === 0 ? '女' : '男'
            // 更新性别字段的值
            this.formdata.gender = gender
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.i !== null) {
                        // 更新表格中对应行的数据
                        this.tableData.splice(this.i, 1, {
                            ...this.formData,
                        })
                        // 重置编辑行索引
                        this.i = null
                    } else {
                        // 否则执行的是添加操作
                        // 将表单数据添加到表格数据中
                        this.tableData.push({ ...this.formData })
                    }
                    // 清空表单数据
                    this.clear()
                    // 关闭抽屉
                    this.drawer = false
                } else {
                    return false
                }
            })
        },
        clear() {
            for (let key in this.formData) {
                this.formData[key] = ''
            }
            this.drawer = false
        },
        clear1() {
            for (let key in this.formdata) {
                this.formdata[key] = ''
            }
        },
        del(value) {
            alert('确定删除?')
            //找到删除索引位置
            const index = this.tableData.indexOf(value)
            this.tableData.splice(index, 1)
            console.log(this.tableData, 'aaa')
        },
        open(value) {
            this.drawer = true
            const index = this.tableData.indexOf(value)
            // 将当前行的数据填充到表单中
            this.formData = JSON.parse(JSON.stringify(this.tableData[index]))
            this.i = index
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
        },
    },
    watch: {
        tableData: {
            handler(val) {
                localStorage.setItem('tableData', JSON.stringify(val))
            },
            deep: true,
        },
    },
    mounted() {
        const result = localStorage.getItem('tableData')
        if (result) {
            this.tableData = JSON.parse(result)
        }
    },
}
</script>

<style scoped></style>
